<template>
  <el-container>
    <el-header style="height: auto;">
      <el-row class="logo-header" style="display: flex;flex-direction: row; ">
        <div class="logo-left">
          <img src="../assets/logo.png" style="height: 60px;" alt="">
          <div class="sys-name">DongBB系统基础研发框架</div>
        </div>
        <div class="logo-right">
          <a style="align-self: center;" target="_blank"
             href="https://www.kancloud.cn/hanxt/vue-spring/content">
            <img class="right-item" src="../assets/font/doc.svg">
          </a>
          <a style="align-self: center;" target="_blank"
             href="https://gitee.com/hanxt/dongbb">
            <img class="right-item" src="../assets/font/github.svg">
          </a>
          <el-dropdown>
            <span class="el-dropdown-link">
                <el-avatar style="float: left"> {{username}} </el-avatar>
                <i class="el-icon-arrow-down el-icon--right" style="padding-top: 20px"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="personal">个人中心</el-dropdown-item>
              <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-row>
    </el-header>

    <el-container>
      <el-aside class="scroll-view" width="auto">
        <div class="aside-header">
          <i style="margin-left: auto;margin-right: 10px" :class="getMenuCollapse()" @click="handleCollapse"></i>
        </div>
        <LayoutMenu :isMenuCollapse="isMenuCollapse"></LayoutMenu>
      </el-aside>

      <el-main class="scroll-view" style="background-color: #F7F8FA;">
        <el-row class="tabs-header" style="display: flex;flex-direction: row; ">
          <el-tabs v-model="$store.state.maintabs.activeRoute"
                   type="border-card" closable
                   @tab-click="clickTab"
                   @tab-remove="removeTab">
            <el-tab-pane v-for="item  in $store.state.maintabs.maintabs"
                         :key="item.route"
                         :label="item.name"
                         :name="item.route"
            ></el-tab-pane>
          </el-tabs>

        </el-row>
        <el-card style="margin: 10px ">
          <router-view></router-view>
        </el-card>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import LayoutMenu from './layout/LayoutMenu'
  import {getTokenUser, setJwtToken} from '@/lib/utils'

  export default {
    name: 'home',
    components: {
      LayoutMenu
    },
    data() {
      return {
        isMenuCollapse: false
      };
    },
    methods: {
      handleCollapse() {
        this.isMenuCollapse = !this.isMenuCollapse
      },
      getMenuCollapse() {
        return {
          "el-icon-s-fold": !this.isMenuCollapse,
          "el-icon-s-unfold": this.isMenuCollapse
        }
      },
      removeTab(targetName) {
        if (targetName !== "/home/firstpage") {
          this.$store.commit('removeTab', targetName);
          this.$router.push({
            path: this.$store.state.maintabs.maintabs[
              this.$store.state.maintabs.maintabs.length - 1
            ].route
          })
        }
      },
      clickTab(tab) {
        this.$router.push({path: tab.$options.propsData.name})
      },
      logout() {
        this.$router.push({path: "/"});
        sessionStorage.clear()
        window.location.reload(); //刷一下可以清空vuex-store
      },
      personal() {
        this.$router.push({name: "personal"});
      }
    },
    computed: {
      username() {
        return getTokenUser();
      }
    }
  }
</script>

<style lang="scss">
  #app > .el-container {
    padding: 0;
    margin: 0;
    height: 100%;
  }

  .el-header {
    width: 100%;
    padding: 0 !important;
    height: 125px;
  }
  .logo-header{
    background:linear-gradient(#2CAAF7,#1E79FC);
    height: 80px !important;
  }
  .logo-left{
    align-items:center;
    //justify-content:center;
    height: 100%;
    display: flex;
    flex-direction: row;
    .sys-name{
      color: #FFFFFF;
      font-size: 30px;
    }
  }
  .logo-right{
    align-self: flex-end;
    display: flex;
    margin-left: auto;
    height: 100%;
    flex-direction: row;
    .right-item{
      height:25px;
      color: #FFFFFF;
      margin-right: 20px;
      align-self: center;
    }
    .el-dropdown {
      flex: 1;
      text-align: right;
      align-self: center;
      .el-avatar {
        color: #1F9FFF;
        background-color: #ffffff;
      }
    }
  }
  .tabs-header{
    height: 45px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .el-aside {
    background-color: #FFFFFF;
    height: calc(100vh - 80px - 50px);
    .el-icon-s-fold, .el-icon-s-unfold {
      font-size: 25px;
      color: #747D8A;
      line-height: 45px;
    }
  }

  .aside-header{
    align-self: flex-end;
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #dbdbdb;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: #ffffff;
  }


  .el-main {
    background-color: #FFFFFF;
    height: calc(100vh - 80px - 50px);
    padding: 0;
    position: relative
  }

  .el-tabs {
    width: 100%;
  }

  .el-tabs--border-card >.el-tabs__header {
    background-color: #FFFFFF;
  }

//当左侧菜单长度超出屏幕，可以滚动，
//但是不显示滚动条,这样更美观
.scroll-view::-webkit-scrollbar {
  display: none;
}

.el-tabs__item{
  border-radius: 5px;
  margin-top: 3px !important;
  margin-bottom: 3px !important;
}

//不显示tab-content，内容区域我们使用router-view自己定义过
.el-tabs--border-card > .el-tabs__content {
  padding: 0;
}
.el-tabs--border-card > .el-tabs__header .el-tabs__item {
  color: #747D8A;
  margin-left: 10px !important;
  background-color: #F2F3F5;
}

.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  color: #eff5ff;
  margin-left: 10px !important;
  background-color: #84A8FA;
}

//第一个标签首页，不显示x关闭
.el-tabs__nav > .el-tabs__item:nth-child(1) span {
  display: none;
}

</style>
